<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<style>
   .a1,.a2,.a3{
       background: url("img/1.jpg") no-repeat;
       width: 300px;
       height: 200px;
       margin: 20px;
       border: 10px dashed black;
   }
   /* 1. background-origin：指定了背景图像的位置区域
            border-box : 背景贴边框的边
            padding-box : 背景贴内边框的边
            content-box : 背景贴内容的边 */
    .a1{
        background-origin: border-box;
    }
    .a2{
        background-origin: padding-box;
    }
    .a3{
        background-origin: content-box;
    }

    .b1,.b2,.b3{
        width: 200px;
        height: 80px;
        border: 10px dashed red;
        background-color: darkcyan;
        margin: 20px;
        padding: 20px;
    }

    /* 2. background-clip: */
    .b1{
        background-clip: border-box;
    }
    .b2{
        background-clip: padding-box;
    }
    .b3{
        background-clip: content-box;
    }

    .c1,.c2{
        background: url("img/1.jpg") no-repeat; 
        width: 200px; 
        height: 100px; 
        border: 2px solid red; 
        margin: 20px;
    }
    /* 3. background-size: 
                cover 缩放成完全覆盖背景区域最小大小
                contain 缩放成完全适应背景区域最大大小 */
    .c1{
        background-size: cover; /* 完全覆盖 */
    }
    .c2{
        background-size: contain; /* 完全适应 */
    }
</style>

<body>
    <!-- 1.背景位置 -->
    <div class="a1"></div>
    <div class="a2"></div>
    <div class="a3"></div>

    <!-- 2.背景裁切 -->
    <div class="b1"></div>
    <div class="b2"></div>
    <div class="b3"></div>

    <!-- 3.背景大小 -->
    <div class="c1"></div>
    <div class="c2"></div>
</body>
</html>